<template>
	<div class="footer">
		<div class="foot">
			<div class="foot-left">
				<p class="foot-p"><span class="foot-span">版权所有：成都信息工程大学研究生处</span>
				</p>
				<p class="foot-p"><span class="foot-span">技术支持：成都信息工程大学计算中心</span>
				</p>
			</div>
			<div class="bord"></div>
			<div class="foot-cent">
				<p class="foot-p"><span class="foot-span">联系地址：四川省成都市西南航空港经济开发区学府路一段24号</span>
				</p>
				<p class="foot-p"><span class="foot-span">邮政编码：610225</span>
				</p>
			</div>
			<div class="bord"></div>
			<div class="foot-link">
				<a class="foot-a" href="http://yjsc.cuit.edu.cn/Ly/lyView.asp" target="_Blank">
					<span class="foot-span">建议与反馈</span>
					<img class="foot-a-img" alt="建议与反馈" src="../../assets/foot-sug.png" />
				</a>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
	.footer {
		width: 100%;
		height: 80px;
		background-color: rgb(0,91,160);
		margin: 0;
		border: 0;
		padding: 0;

		.foot-p {
			line-height: 100%;
			margin: 0;
		}
		
		.foot-span {
			font-size: 0.8em;
			color: #FFFFFF;
			font-weight: 1;
		}

		.foot {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			padding: 2vh;

			.foot-left {
				box-sizing: border-box;
				height: 100%;
				width: 30%;
				float: left;
				// margin-left: 6vw;
				// margin-right: 6vw;
				display: grid;
				align-items: center;
				justify-items: center;
			}
			
			.bord {
				float:left;
				width: 1px;
				height: 100%;
				background: rgb(107, 181, 255);
			}

			.foot-cent {
				height: 100%;
				width: 45%;
				float: left;
				// margin-left: 6vw;
				// margin-right: 6vw;
				display: grid;
				align-items: center;
				justify-items: center;
			}

			.foot-link {
				height: 100%;
				width: 24%;
				float: left;
				text-align: center;
				// margin-left: 6vw;
				// display: grid;
				// align-items: center;
				// justify-items: center;
				.foot-a {
					// font-size: 0.8em; 
					// color: #FFFFFF; 
					// font-weight: 1;
					.foot-a-img {
						height: 45%;
						margin-top: 1.5vh;
					}
				}
				.foot-a:link{
					text-decoration:none;
				}
				.foot-a:hover{ /*鼠标悬停*/
					text-decoration:none;
					font-weight: 600;
				}
			}
		}
	}
</style>

<script>
	export default {
		name: "Footer"
	};
</script>
